<template>
    <div class="app-container calendar-list-container">
      <!-- filter 条件查询 -->
      <div class="filter-container">
        <el-form :inline="true">
            <el-form-item>
                <!-- <el-select v-model="listQuery.workCenter" placeholder="请选择工作中心" @focus="getCenterList" style="width:150px;margin-right:15px;">
                  <el-option :value="item" :label="item" v-for="(item,index) in this.centerList" :key="index"/>
                </el-select> -->
                <el-checkbox v-model="workCenter1" @change="changeWorkCenter1">焊接车间</el-checkbox>
                <el-checkbox v-model="workCenter2" @change="changeWorkCenter2">喷涂车间</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-link :underline="false" type="danger">(注意：筛选指定范围内的工单下第一个工序为当前使用的车间，如不需要请勿选中)</el-link>
            </el-form-item>
        </el-form>
        <el-form :inline="true" ref="form1" :model="listQuery">
            <el-radio v-model="radio" label="1" @change="radioChange">
                <!-- <el-form-item> -->
                    <el-input
                    @keyup.enter.native="getData"
                    clearable
                    style="width: 150px;margin-right:15px;"
                    v-model="listQuery.orderType"
                    placeholder="工单单别"
                    :disabled="radio != '1'"/>
                <!-- </el-form-item> -->
                <!-- <el-form-item> -->
                    <el-input
                    @keyup.enter.native="getData"
                    clearable
                    style="width: 150px;margin-right:15px;"
                    v-model="listQuery.workOrderNo"
                    placeholder="起始工单单号"
                    :disabled="radio != '1'"/>
                <!-- </el-form-item> -->
                <!-- <el-form-item> -->
                    <el-input
                    @keyup.enter.native="getData"
                    clearable
                    style="width: 150px;margin-right:15px;"
                    v-model="listQuery.workOrderNoEnd"
                    placeholder="末端工单单号"
                    :disabled="radio != '1'"/>
                <!-- </el-form-item> -->
            </el-radio>

            <el-radio v-model="radio" label="2" @change="radioChange">
                <!-- <el-input
                clearable
                v-model="orderPlanNo"
                @keyup.enter.native="getData"
                style="width: 150px;margin-right:15px"
                class="filter-item"
                placeholder="计划批号"
                :disabled="radio != '2'"
                ></el-input> -->
            
            <!-- <el-form-item> -->
                <el-input 
                @keyup.enter.native="getData"
                clearable
                :style="{ width: inputWid(listQuery.orderPlanNo) }"
                v-model="listQuery.orderPlanNo"
                placeholder="计划批号"
                :disabled="radio != '2'"/>
            <!-- </el-form-item> -->
            </el-radio>
            <el-input 
                @keyup.enter.native="getData"
                clearable
                style="margin-right:15px;"
                :style="{ width: inputWid(listQuery.technologyNo1) }"
                v-model="listQuery.technologyNo1"
                placeholder="产品品号"/>
            <el-form-item>
                <el-button type="primary" v-waves icon="el-icon-search" @click="getData">查询</el-button>
            </el-form-item>
         </el-form>
      </div>

        <div style="margin-right: 20px;width:100%;display: flex;align-items: center;" :class="radio == '2'?'space-between':'flex-end'">
            <el-select
                v-model="orderType" 
                placeholder="单别"
                style="margin-right: 20px;width:120px"
                v-if="radio == '2'"
                @change="orderTypeFilter"
                >
                    <el-option 
                    :value="item" 
                    :label="item" v-for="(item,index) in this.orderTypeList" 
                    :key="index"/>
            </el-select>
            <div>
                <el-form inline>
                    <el-form-item prop="util" label="工单是否独立打印" label-width="150px">
                    <el-select
                        v-model="util"
                        style="margin-right: 20px;width: 100px"
                        >
                            <el-option 
                            :value="item" 
                            :label="item" v-for="(item,index) in this.printerTypeList" 
                            :key="index"/>
                    </el-select>
                    </el-form-item>
                    <el-button
                    type="button"
                    class="el-button el-button--primary"
                    @click="printFlowCard"
                    round
                    size="medium"
                    :loading="btnLoading"
                    >
                    确认打印</el-button
                    >
                </el-form>
            
            <!-- <el-select
                clearable
                v-model="printerName" 
                placeholder="请选择打印机"
                style="margin-right: 20px"
                >
                    <el-option 
                    :value="item" 
                    :label="item" v-for="(item,index) in this.printerNameList" 
                    :key="index"/>
            </el-select> -->
            
            <el-progress style="margin-left: 10px" :width="50" type="circle" :percentage="percentage" :status="status" v-if="showschedule"></el-progress>
            </div>
        </div>
        <!-- 表格 -->
        <el-form :model="creatForm1" ref="creatForm1">
            <el-table
            :data="creatForm1.tableData"
            border
            v-loading="loading"
            element-loading-text="给我一点时间"
            style="width: 100%;margin-top: 20px"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            max-height="700"
            ref="orderData1"
            @selection-change="SelectionChange1"
            @select="selectRow1"
            :row-style="rowstyles"
            >
            <div v-if="ptWorkCenter">
                <el-table-column type="selection" width="50" fixed="left"></el-table-column>
                <el-table-column label="序号" type="index" align="center" width="60"/>
                <el-table-column prop="orderType" label="工单单别" ></el-table-column>
                <el-table-column prop="workOrderNo" label="工单单号" width="100"></el-table-column>
                <el-table-column prop="technologyNo" label="生产品号" width="100"></el-table-column>
                <el-table-column prop="productName" label="品名" width="150"></el-table-column>
                <el-table-column prop="specification" label="规格" width="150"></el-table-column>
                <el-table-column prop="estimatedOutPut" label="预计产量"></el-table-column>
                <el-table-column prop="orderPlanNo" label="计划批号" width="160"></el-table-column>
                <el-table-column prop="orderTime" label="开单日期"></el-table-column>
                <el-table-column prop="outorderType" label="源工单工别" width="100"></el-table-column>
                <el-table-column prop="outworkOrderNo" label="源工单号" width="100"></el-table-column>
                <el-table-column prop="productionPlanNo" label="生产批号" width="120"></el-table-column>
                <el-table-column prop="texture" label="材质" width="220"></el-table-column>
                <el-table-column prop="thicknessOfPlating" label="板厚" width="180"></el-table-column>
                <el-table-column prop="orderNoType" label="订单单别"></el-table-column>
                <el-table-column prop="orderNo" label="订单单号" width="120"></el-table-column>
                <el-table-column prop="orderNoSerial" label="订单单序"></el-table-column>
                <el-table-column prop="versions" label="版本"></el-table-column>
                <el-table-column prop="godownSum" label="入库仓库"></el-table-column>
                <el-table-column prop="clientNumber" label="客户品号"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                <el-table-column prop="estimateYield" label="排产数量"></el-table-column>
                <el-table-column prop="code" label="条码" width="150"></el-table-column>
                <el-table-column label="工艺资料" prop="technologyNoCount" align="center">
                    <template slot-scope="scope">
                        <div class="fx">
                        {{
                            scope.row.technologyNoCount
                            ? "已上传":"未上传"
                        }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="打印次数"></el-table-column>
            </div>
            <div v-else>
                <el-table-column type="selection" width="50" fixed="left"></el-table-column>
                <el-table-column label="序号" type="index" align="center" width="60"/>
                <el-table-column prop="orderType" label="工单单别" ></el-table-column>
                <el-table-column prop="workOrderNo" label="工单单号" width="100"></el-table-column>
                <el-table-column prop="orderTime" label="开单日期"></el-table-column>
                <el-table-column prop="outorderType" label="源工单工别" width="100"></el-table-column>
                <el-table-column prop="outworkOrderNo" label="源工单号" width="100"></el-table-column>
                <el-table-column prop="orderPlanNo" label="计划批号" width="160"></el-table-column>
                <el-table-column prop="productionPlanNo" label="生产批号" width="120"></el-table-column>
                <el-table-column prop="texture" label="材质" width="220"></el-table-column>
                <el-table-column prop="thicknessOfPlating" label="板厚" width="180"></el-table-column>
                <el-table-column prop="technologyNo" label="生产品号" width="100"></el-table-column>
                <el-table-column prop="productName" label="品名" width="150"></el-table-column>
                <el-table-column prop="specification" label="规格" width="150"></el-table-column>
                <el-table-column prop="orderNoType" label="订单单别"></el-table-column>
                <el-table-column prop="orderNo" label="订单单号" width="120"></el-table-column>
                <el-table-column prop="orderNoSerial" label="订单单序"></el-table-column>
                <el-table-column prop="versions" label="版本"></el-table-column>
                <el-table-column prop="godownSum" label="入库仓库"></el-table-column>
                <el-table-column prop="estimatedOutPut" label="预计产量"></el-table-column>
                <el-table-column prop="clientNumber" label="客户品号"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                <el-table-column prop="estimateYield" label="排产数量"></el-table-column>
                <el-table-column prop="code" label="条码" width="150"></el-table-column>
                <el-table-column label="工艺资料" prop="technologyNoCount" align="center">
                    <template slot-scope="scope">
                        <div class="fx">
                        {{
                            scope.row.technologyNoCount
                            ? "已上传":"未上传"
                        }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="打印次数"></el-table-column>
            </div>
            </el-table>
        </el-form>

    </div>
</template>

<script>
import { findword02,word02,findZplPrinterInfoList,findZplPrinterInfo,findWorkCenterLimit1 } from '../../api/orderAndMachine'
import { getCenter } from '../../api/workSection.js'
export default {
    name: 'printFlowCard',
    data() {
        return {
            listQuery: {
                page: 1,
                limit: 10000
            },
            workCenter1: false,
            workCenter2: false,
            creatForm1: {
                tableData: []
            },
            loading: false,
            btnLoading: false,
            printerName: '',
            printerNameList: [],
            dialogFormVisible: false,
            rowSelect1: [],
            subForm1: [],
            percentage: 0,
            timer: '',
            status: '',
            showschedule: false,
            radio: '1',
            orderType: '',
            orderTypeList: [],
            AlltableData: [],
            printerTypeList: ['是','否'],
            util: '是',
            ptWorkCenter:''
        }
    },
    watch:{
        creatForm1:{
        deep: true,
        handler(newVal,oldVal) {
          console.log(newVal.tableData);
          if(newVal.tableData.length > 0){
            this.ptWorkCenter = newVal.tableData.every(item => item.orderType == '5104')
          }
        }
      },
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        // 清空缓存
        radioChange(e){
            console.log(e)
            this.listQuery = {
                page: 1,
                limit: 10000
            }
            this.creatForm1.tableData = []
            this.subForm1 = []
            this.rowSelect1 = []
        },
        rowstyles({row,rowIndex}){
            if(row.technologyNoCount){
                return {"background": "#dbf1e1"}
            } else {
                return {"background": "#fef0f0"}
            }
        },
        getData(){
            if(this.radio == '1'){
                if(!this.listQuery.orderType && !this.listQuery.technologyNo1){
                    return this.$message.error('工单单别不能为空!')
                } else if(!this.listQuery.workOrderNo && !this.listQuery.technologyNo1){
                    return this.$message.error('起始工单单号不能为空!')
                } else if(!this.listQuery.workOrderNoEnd && !this.listQuery.technologyNo1){
                    return this.$message.error('末端工单单号不能为空!')
                }
            } else if(this.radio == '2'){
                if(!this.listQuery.orderPlanNo && !this.listQuery.technologyNo1){
                    return this.$message.error('计划批号不能为空!')
                }
            }
            this.orderTypeList = []
            this.orderType = ''
            // clearInterval(this.timer)
            if(this.workCenter1 || this.workCenter2){
                this.handleFilter()
            } else { this.handleFilter2() }
        },
        async handleFilter() {
            this.loading = true
            let query = Object.assign({},this.listQuery)
            if(this.workCenter1){ 
                query.workCenter = '焊接车间'
            } else if(this.workCenter2){ query.workCenter = '喷涂车间' }
            const data = await findWorkCenterLimit1(query)
            if(data.code == '2') return this.$message.error(data.msg)
            if(!data.data.length){
                this.creatForm1.tableData = data.data
                this.loading = false
                this.btnLoading = false
                this.$message.success(data.msg)
                return
            }
            this.handleFilter2(data.data)
        },
        async handleFilter2(filterList) {
            this.loading = true
            let query = Object.assign({},this.listQuery)
            const data = await findword02(query)
            if(data.code == '2') return this.$message.error(data.msg)
            this.AlltableData = []
            if(this.workCenter1 || this.workCenter2){
                this.creatForm1.tableData = []
                data.data.list.forEach(item => {
                    filterList.forEach(itemf => {
                        if(item.workOrderNo.trim() == itemf.workOrderNo.trim()){ this.AlltableData.push(item)}
                    })
                })
            } else { this.AlltableData = data.data.list }
            this.creatForm1.tableData = this.AlltableData.length?JSON.parse(JSON.stringify(this.AlltableData)):[]
            this.loading = false
            this.btnLoading = false
            this.$message.success(data.msg)
            if(!this.creatForm1.tableData.length) return
            if(this.radio == '2'){
                let midorderTypeList = []
                this.AlltableData.forEach(item => {
                    midorderTypeList.push(item.orderType)
                })
                if(midorderTypeList.length){
                    let set = new Set(midorderTypeList)
                    this.orderTypeList = Array.from(set)
                }
                this.orderType = this.orderTypeList[0]
                this.creatForm1.tableData = this.AlltableData.filter(item => item.orderType == this.orderTypeList[0])
            }
        },
        orderTypeFilter(orderType){
            this.creatForm1.tableData = this.AlltableData.filter(item => item.orderType == orderType)
        },
        async printFlowCard(){
            if(!this.subForm1.length) return this.$message.error('请选择内容')
            if(!this.util) return this.$message.error('请选择类型!')
            let workNo = []
            this.subForm1.forEach(item => {
                workNo.push({workOrderNo: item.workOrderNo})
            })
            let query = {
                workNo: workNo,
                util: this.util == '是' ? 1 : 0,
                orderType: this.radio == '2'?this.orderType:this.listQuery.orderType,
            }
            this.btnLoading = true
            const data = await word02(query)
            this.btnLoading = false
             // 创建临时URL
            const blob = new Blob([data], { type: 'application/pdf' });
            const blobUrl = URL.createObjectURL(blob);
            // 新窗口打开 PDF
            const newWindow = window.open(blobUrl);
            // 如果用户浏览器允许，加载完后自动打印
            if (newWindow) {
              newWindow.onload = function () {
                newWindow.focus();
                newWindow.print();
              };
            } else {
              // 浏览器拦截弹窗的提示
              this.$message.error('请在浏览器设置  允许弹出窗口');
            }
        },
        async getPinterschedule(){
            let query = {
                orderType: this.listQuery.orderType,
                workOrderNo: this.listQuery.workOrderNo,
                workOrderNoEnd: this.listQuery.workOrderNoEnd,
            }
            let data = await findZplPrinterInfo(query)
            this.percentage = data.data.count
        },
        closeschedule(){
            this.showschedule = false
        },
        selectRow1(selection, row) {
            this.rowSelect1 = selection;
        },
        SelectionChange1(select){
            this.rowSelect1 = select;
            this.subForm1 = select;
        },
        async getPrinter(){
            const data = await findZplPrinterInfoList()
            if(data.code == '1'){
                console.log('data',data);
                this.printerNameList = JSON.parse(JSON.stringify(data.data))
                this.printerNameList.forEach((item,index) =>{
                    if(item.indexOf('\\\\')>=0){
                       this.printerNameList[index] = item.split('\\')[3]
                    }
                })
                console.log(this.printerNameList)
            }
        },
        changeWorkCenter1(e){
            if(this.workCenter2){ this.workCenter2 = false}
        },
        changeWorkCenter2(e){
            if(this.workCenter1){ this.workCenter1 = false}
        }
    },
     // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
        this.getPrinter()
    },
}
</script>

<style>
    .space-between{
        justify-content: space-between;
    }
    .flex-end{
        justify-content: flex-end;
    }
</style>